<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //获取目标canvas
            var can = document.querySelector('canvas');
            //获取2d画笔
            var context = can.getContext('2d');
            //绘制水平线条
            for (var row = 1; row < 16; row++) {
                //起点
                context.moveTo(50, 50 + (row - 1) * 40);
                //终点
                context.lineTo(610, 50 + (row - 1) * 40);
            }
            
            //绘制垂直线条
            for (var col = 1; col < 16; col++) {
                context.moveTo(50 + (col - 1) * 40, 50);
                context.lineTo(50 + (col - 1) * 40, 610);
            }
            //呈现
            context.stroke();
            //清空中间区域矩形
            context.clearRect(230,260,200,100);
            //设置填充颜色
            context.fillStyle='white';
            //填充白色矩形区域
            context.fillRect(250,280,160,60);

            //设置填充颜色为黑色
            context.fillStyle='black';
            //绘制四个基点
            //开始路径
            context.beginPath();
            //绘制圆形
            context.arc(170,170,5,0,Math.PI*2);
            //关闭路径
            context.closePath();
            //填充
            context.fill();
            //开始路径
            context.beginPath();
            //绘制圆形
            context.arc(490,170,5,0,Math.PI*2);
            //关闭路径
            context.closePath();
            //填充
            context.fill();
            //开始路径
            context.beginPath();
            //绘制圆形
            context.arc(490,490,5,0,Math.PI*2);
            //关闭路径
            context.closePath();
            //填充
            context.fill();
            //开始路径
            context.beginPath();
            //绘制圆形
            context.arc(170,490,5,0,Math.PI*2);
            //关闭路径
            context.closePath();
            //填充
            context.fill();
            //绘制文字
            //设置字体样式
            context.font='32px 楷体';
            //水平居中
            context.textAlign='center';
            //绘制字体
            context.fillText('五子棋',330,40);
            //垂直对齐方式
            context.textBaseline='middle';
            //绘制胜利
            context.fillText('胜利!',330,310);
        }
    </script>
</head>

<body>
    <canvas style="background-color: chocolate;" width="660" height="660"></canvas>
</body>

</html>